﻿<!DOCTYPE html>
<html lang="en">
<head>
   <!--#include file="ssi/head.html"-->
  <title>LESS转化为CSS</title>
  <meta name="description" content="less转化为css">
  <meta name="keywords" content="less转化为css">
  <!--#include file="ssi/link.html"-->
</head>
<body>
    <!--#include file="ssi/nav.html"-->
    <!--#include file="ssi/top-head.html"-->

    <section class="container margin-bot-l">
      <style>
        textarea{display: block;width: 100%;height: 400px;padding: 10px;}
        .btn{width: 50%;margin: 0 auto;display: block;}
      </style>
      <div class="row margin-bot-l">
        <div class="col-md-6">
          <h2>LESS代码</h2>
          <!-- @width:500px;
@height:300px;
@font_size:12px;

textarea {
  width:@width;
  height:@height;
  font-size:@font_size;
  padding: 3 + 4px;
} -->
          <textarea id="less-code" placeholder="请贴入LESS代码，然后点击下方按钮进行转换"></textarea>
        </div>
        <div class="col-md-6">
          <h2>转化后的CSS代码</h2>
          <textarea id="css-code" placeholder="请点击下方按钮进行转换"></textarea>
        </div>
      </div>
      <button class="btn btn-primary btn-lg" id="zhuanhuan">一键转换LESS 到 CSS</button>

      <blockquote>
        <p><strong class="margin-bot-l">使用须知</strong></p>
        <p>1、less代码中如果存在变量、函数都需要与主要的样式贴在一起，否则会因为查找不到变量而导致转化失败。</p>
        <p>2、贴入代码体积请勿较大，本工具仅做测试工具使用，如代码体积较大，可能存在等待转换时间较长的问题。</p>
        <p>浏览器环境中使用LESS：</p>
        <p>&lt;link rel="stylesheet/less" type="text/css" href="styles.less" &gt;</p>
        <p>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" &gt;&lt;/script&gt;</p>
      </blockquote>
    </section>

    <section class="container">
      <style>
        .alert a{margin-right: 10px;}
      </style>
      <div class="alert alert-warning">
        <strong>其他可用的LESS转化为CSS工具：</strong>
        <a href="https://less.bootcss.com/" target="_blank">LESS官方教程</a>
        <a href="http://tools.jb51.net/code/less2css/" target="_blank">在线less编辑器</a>
        <a href="https://www.sass.hk/css2sass/" target="_blank">css转LESS/SASS/STYLUS</a>
      </div>
    </section>

<!--#include file="ssi/footer.html"-->

<script>
  // 每一页都需要配置的信息
  var pageInfo = {
    toolLogo: 'img/icon-less2css.png',
    toolName: document.title
  }
</script>
  <!--#include file="ssi/script.html"-->

  <script>
    var testCode = "@width:500px;\n@height:300px;\n@font_size:12px;\n\ntextarea  {\nwidth:@width;\nheight:@height;\nfont-size:@font_size;\npadding: 3 + 4px;\n} ";

    $('#less-code').val(testCode);
    $('#zhuanhuan').on('click', function() {
      var lessStr = $('#less-code').val();
      if(lessStr == '') {
        layer.msg('输入的Less不能为空！');
        return;
      }
      $.ajax({
        url: apiUrl + 'less2css',
        type: 'POST',
        dataType: 'json',
        data: {less: lessStr},
        success: function(res) {
          if(res.error === 0) {
            $('#css-code').val(res.data);
          } else {
            layer.msg(res.msg);
          }
        }
      });
    });
    
  </script>
</body>
</html>

